<template>
	<view class="medical">
		<view class="topCon">
			<text>官方认证</text>
		</view>
		<view class="content">
			<view class="one">
				<view class="oneP">
					<text class="title">个人认证</text>
					<text class="type">适合人群：医师、护士、医技</text>
				</view>
				<view class="oneBtn" @tap="goto('pages/medical/faceAuthentication')">
					<text>去认证</text>
					<view class="iconfont icon-youjiantouright">
					</view>
				</view>
				<image src="/static/images/med1.png" mode=""></image>
			</view>
			<view class="one one2">
				<view class="oneP">
					<text class="title">企业机构认证</text>
					<text class="type">适合人群：医院、门诊、社区等等医疗机构</text>
				</view>
				<view class="oneBtn" @tap="goto('pages/medical/enterpriseCertification')">
					<text>去认证</text>
					<view class="iconfont icon-youjiantouright">
					</view>
				</view>
				<image src="/static/images/med2.png" mode=""></image>
			</view>
			<view class="two">
				<text class="tTitle">认证说明</text>
				<view class="twoP">
					<text>1.个人认证要求:国家人力资源部和社会保障部、国家卫生健康委员会，国家药品监督管理局颁发的证书。</text>
					<text class="tType">适合人群：医师、护士、医技</text>
				</view>
				<view class="twoP">
					<text>2.机构认证要求：卫生委员会颁发的（医疗机构执业许可证）</text>
					<text class="tType">适合人群:医院，门诊，社区，等等其他医疗机构</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: $page-color-base2;
	}
	/* #endif */
	
	.medical {
		position: relative;
		background-color: $page-color-base2;
		min-height: 100vh;

		.topCon {
			position: relative;
			width: 750rpx;
			height: 230rpx;
			// background: linear-gradient(to bottom,
			// 		#CFF4E8 0% 75%,
			// 		/* 浅绿：从顶部0%延伸到75%（覆盖原70%的范围） */
			// 		#E4F9F2 70% 95%,
			// 		/* 中间绿：从70%开始到95%（与上一个颜色在70%-75%重叠，形成渐变） */
			// 		#F5FDFA 90% 100%
			// 		/* 最浅绿：从90%开始到100%（与上一个颜色在90%-95%重叠，形成渐变） */
			// 	);
			background: linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(68, 212, 168, 0)100%);

			text {
				position: absolute;
				left: 24rpx;
				top: 116rpx;
				font-size: 56rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 59.36rpx;
				color: rgba(54, 68, 79, 1);
			}
		}

		.content {
			padding: 0 24rpx;

			.one {
				position: relative;
				border-radius: 24rpx;
				background: rgba(227, 252, 245, 1);
				padding: 48rpx;
				margin-top: 20rpx;

				.oneP {
					display: flex;
					flex-direction: column;
					margin-top: 24rpx;

					.title {
						font-size: 40rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 53.04rpx;
						color: rgba(68, 212, 168, 1);
					}

					.type {
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 37.12rpx;
						margin-top: 16rpx;
						width: 364rpx;
					}
				}

				.oneBtn {
					width: 164rpx;
					height: 64rpx;
					border-radius: 40rpx;
					background: rgba(68, 212, 168, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #fff;
					margin-top: 56rpx;

					.iconfont {
						margin-left: 8rpx;
					}
				}

				image {
					position: absolute;
					right: 43.33rpx;
					top: 10.83rpx;
					width: 162.5rpx;
					height: 249.17rpx;
				}
			}

			.one2 {
				background: rgba(225, 250, 252, 1);
				margin-top: 32rpx;

				.oneP {
					.title {
						color: rgba(76, 212, 230, 1);
					}
				}

				.oneBtn {
					background: rgba(76, 212, 230, 1);
				}
			}

			.two {
				margin-top: 42rpx;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(94, 103, 110, 1);

				.twoP {
					margin-top: 24rpx;
					display: flex;
					flex-direction: column;
					line-height: 36rpx;
				}

				.tTitle {
					font-size: 28rpx;
					font-weight: bold;
				}

				.tType {
					margin-top: 16rpx;
				}
			}
		}
	}
</style>